<template>
<div>
    <van-nav-bar :title="comment.reply_count === 0 ?'暂无回复':comment.reply_count+'条回复'">
        <van-icon slot="left" name="cross" @click="$emit('close')" />
    </van-nav-bar>
    <div class="content-wrap">
        <comment-item :comment="comment"></comment-item>
        <van-cell>全部回复</van-cell>
        <comment-list :source="comment.com_id" type="c" ref="commentlist"></comment-list>
    </div>
    <div class="bottom">
        <van-button @click="isCommentShow=true">发表评论</van-button>
    </div>

    <van-popup v-model="isCommentShow" position="bottom">
        <comment-post :target="comment.com_id" @update-post="updatePost"></comment-post>
    </van-popup>
</div>
</template>

<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import CommentPost from './comment-post'
export default {
  name: 'CommentReply',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  components: {
    CommentItem,
    CommentList,
    CommentPost
  },
  data () {
    return {
      isCommentShow: false
    }
  },
  methods: {
    updatePost (obj) {
      console.log(obj)
      this.comment.reply_count++
      this.isCommentShow = false
      this.$refs.commentlist.comments.unshift(obj)
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
    background-color: #fff !important;

    /deep/ .van-nav-bar__title {
        color: #000;
    }

    .van-icon {
        color: #000 !important;
    }
}

.bottom {
    height: 88px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #ccc;
    padding: 20px 0;
    background: #fff;

    .van-button {
        width: 60%;
    }
}

.content-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 92px;
    bottom: 88px;
    overflow-y: auto;
}
</style>
